<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>物资编码查看</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 35%;
				width: 97%;
				text-align: center;
			}
		</style>
	</head>
	<body>

		<div id="app">


			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="物资名称">
						<el-input v-model="formInline.materialname" placeholder="物资名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="selectTj">查询</el-button>
				</el-form>
			</fieldset>


			<!-- 查询开始 -->
			<el-table size="big" :data="tableData" border style="width: 100%">

				<el-table-column align="center" prop="codematerial" label="物资编码" width="220">
				</el-table-column>
				<el-table-column align="center" prop="materialname" label="物资名称" width="220">
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="page">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</div>
			<!-- 分页 -->

			<!-- 查询结束 -->
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					formInline: {
						materialname: ''
					},
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5 //每页条数

				},
				methods: { //查询
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					initdata() {
						//获取物资编码信息
						var that = this
						axios.post(HTTP + "code/select/" + this.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total

						}).catch(err => {
							console.log(err)
						});
					},
					selectTj() {
						//搜索
						var that = this
						axios.post(HTTP + "code/selecttj", this.formInline).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.list


						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() {
					this.initdata()
				}

			})
		</script>
	</body>
</html>